<template>
  <div class="house">
  <!-- {{store.state.order.orders}} -->
    <div class="house-top">
      <div class="house-top-nav">业务查询>>库存查询</div>
      <div class="house-top-model">
        <div class="house-top-model-li">
          <div class="house-model-left">
            货主
            <input type="text" />
          </div>
          <div class="house-model-left">
            仓库
            <el-select v-model="value" placeholder="Select">
            </el-select>
          </div>
          <div class="house-model-button">查询</div>
        </div>
      </div>
      <div class="house-table">
        <el-table
          style="width: 100%"
           :data="store.state.order.orders"
          border=true;
        >
          <el-table-column #default="scope" label="仓库" >{{scope.row.storeName}}</el-table-column>
           <el-table-column #default="scope" label="仓位" >{{scope.row.storeNama}}</el-table-column>
            <el-table-column #default="scope" label="货物名称" >{{scope.row.threeName}}</el-table-column>
             <el-table-column #default="scope" label="货主" >{{scope.row.peopName}}</el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useStore } from "vuex";
// 引用ref
import { ref } from "vue";
// 创建仓库
const store = useStore();
store.dispatch("getWebOrder");
// 执行action中的getWebOrder方法
const dialogVisible = ref(false)
interface Ion{
  name:string;
  remark:string;
  time:string;
}
const value = ref("");
</script>
<style scoped>
.el-table tr {
  height: 35px;
  background-color: #eee;
}
.el-table th.el-table__cell > .cell {
  text-align: center;
  color: #2e6095;
  font-weight: 700;
}
.el-table th.el-table__cell {
  background-color: #eee;
}
.house-table {
  text-align: center;
  border: 1px solid #eee;
}
.house-model-button {
  padding-top: -2px;
  width: 60px;
  height: 30px;
  line-height: 30px;
  background-color: #dbdee0;
  border: 1px px solid #cbced0;
  text-align: center;
  float: left;
  margin: 8px 0 0 15px;
}
.house {
  width: 1000px;
  min-width: 1000px;
  height: 216px;
}
.house-top {
  width: 1000px;
  font-size: 14px;
}
.house-top-nav {
  height: 40px;
  line-height: 40px;
  background-color: #f7f7f7;
  padding-left: 25px;
  border: 1px solid #e8e9ea;
  color: #2e6095;
}
.house-top-model {
  border: 1px solid #e8e9ea;
  border-top: none;
  height: 100px;
  overflow: hidden;
  color: #333;
}
.house-top-model-li {
  display: flex;
  width: 700px;
  height: 45px;
  line-height: 45px;
  margin: 25px 0 0 25px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
}
.house-model-left {
  border-right: 1px solid #eee;
  color: #666;
  font-size: 14px;
  float: left;
  width: 290px;
  height: 100%;
  margin-left: 15px;
}
.house-model-left input {
  height: 30px;
  width: 200px;
  border: 1px solid #cbced0;
}
* {
  margin: 0px;
  padding: 0px;
}
</style>
